{{! Pricing (ADR 0095): the heading, an optional Monthly / Yearly switch (two radio buttons: CSS shows each plan's first or second price, no script, also on the canvas), then one card per plan with the Pricing plan's markup and look (requires it): its label, name, price, text, button and what is included (rich text; each point gets the feature icon). }}
<div {{@attrs}}>{{#heading}}<div class="sv-sectionhead sv-sectionhead--{{headingAlign}}{{#headingSize}} sv-sectionhead--size-{{headingSize}}{{/headingSize}}"><h2 class="sv-sectionhead__title"{{@edit heading}}>{{{heading}}}</h2>{{#intro}}<p class="sv-sectionhead__text"{{@edit intro}}>{{intro}}</p>{{/intro}}</div>{{/heading}}{{^heading}}{{#intro}}<div class="sv-sectionhead sv-sectionhead--{{headingAlign}}{{#headingSize}} sv-sectionhead--size-{{headingSize}}{{/headingSize}}"><p class="sv-sectionhead__text"{{@edit intro}}>{{intro}}</p></div>{{/intro}}{{/heading}}{{#switch}}<div class="sv-pricing__switch sv-pricing__switch--{{headingAlign}}" role="radiogroup"><label class="sv-pricing__option"><input type="radio" name="sv-{{@id}}-billing" value="a" checked><span{{@edit billingA}}>{{billingA}}</span></label><label class="sv-pricing__option sv-pricing__option--b"><input type="radio" name="sv-{{@id}}-billing" value="b"><span{{@edit billingB}}>{{billingB}}</span>{{#billingNote}}<span class="sv-pricing__save"{{@edit billingNote}}>{{billingNote}}</span>{{/billingNote}}</label></div>{{/switch}}<div class="sv-pricing__plans">{{#plans}}<article class="sv-pricing-plan sv-pricing__plan{{#style}} sv-card-{{style}}{{#styleCustom}} sv-card-custom{{/styleCustom}} sv-round-{{corners}}{{/style}}{{#recommended}} sv-pricing-plan--highlight-{{recommendedLook}}{{/recommended}}"{{#styleCustom}} style="--sv-custom-card:{{styleCustom}}"{{/styleCustom}}>{{#badge}}<p class="sv-pricing-plan__badge"><span{{@edit plans.badge}}>{{badge}}</span></p>{{/badge}}<h3 class="sv-pricing-plan__name"{{@edit plans.name}}>{{{name}}}</h3><p class="sv-pricing-plan__price sv-pricing__price-a"><span class="sv-pricing-plan__amount"{{@edit plans.price}}>{{price}}</span>{{#period}}<span class="sv-pricing-plan__period"{{@edit plans.period}}>{{period}}</span>{{/period}}</p>{{#switch}}<p class="sv-pricing-plan__price sv-pricing__price-b">{{#priceB}}<span class="sv-pricing-plan__amount"{{@edit plans.priceB}}>{{priceB}}</span>{{#periodB}}<span class="sv-pricing-plan__period"{{@edit plans.periodB}}>{{periodB}}</span>{{/periodB}}{{/priceB}}{{^priceB}}<span class="sv-pricing-plan__amount">{{price}}</span>{{#period}}<span class="sv-pricing-plan__period">{{period}}</span>{{/period}}{{/priceB}}</p>{{/switch}}{{#text}}<p class="sv-pricing-plan__text"{{@edit plans.text}}>{{text}}</p>{{/text}}{{#button.label}}<div class="sv-button sv-button--variant-{{buttonVariant}} sv-button--size-md sv-pricing-plan__button">{{#button.link.url}}<a class="sv-button__control{{#button.arrow}} sv-button__control--arrow{{/button.arrow}}{{#button.icon}} sv-button__control--icon{{#button.iconEnd}} sv-button__control--icon-end{{/button.iconEnd}} sv-glyph-{{button.icon}}{{/button.icon}}" href="{{button.link.url}}"{{#button.link.newTab}} target="_blank" rel="noopener noreferrer"{{/button.link.newTab}}>{{button.label}}</a>{{/button.link.url}}{{^button.link.url}}<span class="sv-button__control{{#button.arrow}} sv-button__control--arrow{{/button.arrow}}{{#button.icon}} sv-button__control--icon{{#button.iconEnd}} sv-button__control--icon-end{{/button.iconEnd}} sv-glyph-{{button.icon}}{{/button.icon}}">{{button.label}}</span>{{/button.link.url}}</div>{{/button.label}}<div class="sv-pricing-plan__features sv-pricing__features sv-glyph-{{featureIcon}}"{{@edit plans.features}}>{{{features}}}</div></article>{{/plans}}</div></div>